{include file="public/header"}

<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form action="" method="post" class="layui-form layui-form-pane">
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">账号备注</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <input type="text" id="name" name="data[nickname]" value="{$data.nickname|default=''}"
                                required="" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid" style="color: #FF5722;">
                            账号标签,方便快速记录用户,快速查找
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">用户账号</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <input type="text" id="username" name="data[username]" value="{$data.username|default=''}"
                                required="" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid" style="color: #FF5722;">
                            请使用6位数以上的字母或字母+数组组合
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">用户密码</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <input type="text" id="password" name="data[password]" value="" autocomplete="off"
                                class="layui-input">
                        </div>
                        <div class="layui-form-mid" style="color: #FF5722;">
                            请使用6位数以上的字母+数组组合
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">类型</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <input type="radio" name="data[type]" lay-filter="type" value="1" {if !empty($data.type) &&
                                $data.type==1}checked{/if} title="总管理员">
                            <input type="radio" name="data[type]" lay-filter="type" value="2" {if !empty($data.type) &&
                                $data.type==2}checked{/if} title="开业派单员">
                            <input type="radio" name="data[type]" lay-filter="type" value="3" {if !empty($data.type) &&
                                $data.type==3}checked{/if} title="财务管理员">
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">财务负责项目(可多选，不选表示无组别)</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            {foreach $grouplist as $k => $v}
                            {if $k != 1}
                            <input name="data[groups][]" lay-skin="primary" type="checkbox" value="{$k}" title="{$v}"
                                {if !empty($data.groups) && in_array($k, $data.groups) && $data.groups>= 0} checked
                            {/if}>
                            {/if}
                            {/foreach}
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">拥有权限</div>
                    {foreach :config('menu.menu') as $k => $v}
                    <div class="layui-card-body layui-row layui-col-space10">
                        {if $v.show == true}
                        <div class="layui-col-md12">
                            <input type="checkbox" name="like1[write]" lay-skin="primary" lay-filter="father"
                                title="{$v.name}">
                        </div>
                        <div class="layui-col-md12">
                            {foreach $v.sub as $x => $y}
                            <input name="data[role][]" lay-skin="primary" type="checkbox" value="{$y.uri}"
                                title="{$y.name}" {if !empty($data.role) && in_array($y.uri, $data.role)} checked {/if}>
                            {/foreach}
                        </div>
                        <hr />
                        {/if}
                    </div>
                    {/foreach}
                </div>
                <div class="layui-form-item">
                    <input type="hidden" value="{$data['id']|default='0'}" name="data[id]" />
                    <button class="layui-btn" lay-submit="" lay-filter="add">提交</button>
                </div>
            </form>
        </div>
    </div>
    {include file="public/footer"}

    <script>
        layui.use(['form', 'layer'], function () {
            $ = layui.jquery;
            var form = layui.form
                , layer = layui.layer;
            form.on('radio(type)', function (data) {
                var type = data.value;
                if (type == 1) {
                    $('#provinceshow').hide();
                    $('#cityshow').hide();
                    $('#areashow').hide();
                    $('#streetshow').hide();
                }
                if (type == 2) {
                    $('#provinceshow').show();
                    $('#cityshow').show();
                    $('#areashow').hide();
                    $('#streetshow').hide();
                }
                if (type == 3) {
                    $('#provinceshow').show();
                    $('#cityshow').show();
                    $('#areashow').show();
                    $('#streetshow').hide();
                }
                if (type == 4) {
                    $('#provinceshow').show();
                    $('#cityshow').show();
                    $('#areashow').show();
                    $('#streetshow').show();
                }
            });
            //监听省份选择
            form.on('select(province)', function (data) {
                if (!data.value) {
                    return false;
                }
                //发异步，把数据提交给php
                $.ajax({
                    type: 'get',
                    url: '/base/getregion',
                    data: { area_code: data.value, level: 2 },
                    success: function (res) {
                        if (res.status == 0) {
                            var str = '';
                            $.each(res.data, function (i, obj) {
                                var checked = '';
                                str += '<input type="checkbox"  lay-filter="city" value="' + obj.area_code + '" ' + checked + ' name="data[city][]" lay-skin="primary" title="' + obj.name + '">';
                            });
                            $('#city').html(str);
                            $('#area').html('');
                            $('#street').html('');
                            form.render();
                        } else {
                            layer.msg(res.msg, { icon: 2, time: 1000 });
                        }
                    }
                });
                return false;
            });
            //监听城市选择
            form.on('checkbox(city)', function (data) {
                //选中状态发异步，把数据提交给php
                if (data.elem.checked) {
                    $.ajax({
                        type: 'get',
                        url: '/base/getregion',
                        data: { area_code: data.value, level: 3 },
                        success: function (res) {
                            if (res.status == 0) {
                                var str = '<div id="tops3' + data.value + '" class="layui-card-body layui-row layui-col-space10"><div class="layui-card-header">【' + res.parent.name + '】</div ><div class="layui-col-md12">';
                                $.each(res.data, function (i, obj) {
                                    var checked = '';
                                    str += '<input type="checkbox"  lay-filter="area"  value="' + obj.area_code + '" ' + checked + ' name="data[area][]" lay-skin="primary" title="' + obj.name + '">';
                                });
                                str += '</div></div>';
                                $('#area').append(str);
                                form.render();
                            } else {
                                layer.msg(res.msg, { icon: 2, time: 1000 });
                            }
                        }
                    });
                } else {
                    //删掉区域
                    $name = '#tops3' + data.value;
                    $($name).remove();
                    //删掉街道
                    $.ajax({
                        type: 'get',
                        url: '/base/getregion',
                        data: { area_code: data.value, level: 3 },
                        success: function (res) {
                            if (res.status == 0) {
                                $.each(res.data, function (i, obj) {
                                    $name = '#tops4' + obj.area_code;
                                    $($name).remove();
                                });
                            } else {
                                layer.msg(res.msg, { icon: 2, time: 1000 });
                            }
                        }
                    });
                    layer.msg('已取消勾选并且解除下级区域、街道勾选');
                }
                return false;
            });
            //监听区域选择
            form.on('checkbox(area)', function (data) {
                //选中状态发异步，把数据提交给php
                if (data.elem.checked) {
                    $.ajax({
                        type: 'get',
                        url: '/base/getregion',
                        data: { area_code: data.value, level: 4, 'isget': 1 },
                        success: function (res) {
                            if (res.status == 0) {
                                var str = '<div id="tops4' + data.value + '" class="layui-card-body layui-row layui-col-space10"><div class="layui-card-header">' + res.pparent.name + '   【' + res.parent.name + '】</div ><div class="layui-col-md12">';
                                $.each(res.data, function (i, obj) {
                                    var checked = '';
                                    str += '<input type="checkbox" value="' + obj.id + '" ' + checked + ' name="data[street][]" lay-skin="primary" title="' + obj.name + '">';
                                });
                                str += '</div></div>';
                                $('#street').append(str);
                                form.render();
                            } else {
                                layer.msg(res.msg, { icon: 2, time: 1000 });
                            }
                        }
                    });
                } else {
                    $name = '#tops4' + data.value;
                    $($name).remove();
                    layer.msg('已取消勾选并且解除下级街道勾选');
                }
                return false;
            });
            //监听提交
            form.on('submit(add)', function (data) {
                //发异步，把数据提交给php
                $.ajax({
                    type: 'post',
                    data: data.field,
                    success: function (res) {
                        if (res.status == 0) {
                            layer.msg(res.msg, { icon: 6, time: 1000 }, function () {
                                // 获得frame索引
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.location.reload();
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg(res.msg, { icon: 2, time: 1000 });
                        }
                    }
                });
                return false;
            });

            form.on('checkbox(father)', function (data) {

                if (data.elem.checked) {
                    $(data.elem).parent().next('div').find('input').prop("checked", true);
                    form.render();
                } else {
                    $(data.elem).parent().next('div').find('input').prop("checked", false);
                    form.render();
                }
            });


        });
    </script>